<template>
	<h3>ModuleDemo</h3>
	<p>name:{{ name }}</p>
	<p>age:{{ age }}</p>
	<button @click="changeAge({ age: 36 })">changeAge</button>
	<hr />
	<p>aCount:{{ aCount }}</p>
	<p>rootCount:{{ rootCount }}</p>
</template>

<script>
	import { mapState, mapActions, createNamespacedHelpers } from "vuex";
	const { mapState: bMapState, mapActions: bMapActions } =
		createNamespacedHelpers("b");

	export default {
		computed: {
			// ...mapState("b", {
			// 	name: (state) => state.name,
			// 	age: (state) => state.age,
			// }),

			// 从子模块下订阅数据
			...mapState("a", {
				aCount: "count",
			}),
			// ...mapState("b", ["name", "age"]),
			...bMapState(["name", "age"]),

			// 从根模块下订阅数据
			...mapState({
				rootCount: "count",
			}),
		},
		methods: {
			// ...mapActions("b", {
			// 	changeAge: "setAge",
			// }),
			...bMapActions({
				changeAge: "setAge",
			}),
		},
	};
</script>

<style>
</style>